<template>
  <div class="video-dialog">
    <div class="title">
      <div class="name">视频监控</div>
      <div class="icon"><i class="el-icon-close" @click="close"></i></div>
    </div>
    <div class="mainContainer" v-if="!videoUrl">
      <video
        ref="videoElement"
        id="videoElement"
        class="centeredVideo"
        controls
        autoplay
        width="100%"
        height="300px"
      >
        Your browser is too old which doesn't support HTML5 video.
      </video>
    </div>
    <div class="mainContainer" v-else>
      <mp4-tpl :videoUrl="videoUrl" @videoClose="videoClose"></mp4-tpl>
    </div>
    <div class="controls">
      <div class="direction">
        <div class="top">
          <i class="el-icon-caret-top" @click="handleDirection('UP')"></i>
        </div>
        <div class="left">
          <i class="el-icon-caret-left" @click="handleDirection('LEFT')"></i>
        </div>
        <div class="play" v-if="isPlay">
          <i class="el-icon-video-pause" @click="flv_pause"></i>
        </div>
        <div class="play" v-else>
          <i class="el-icon-video-play" @click="flv_start"></i>
        </div>
        <div class="right">
          <i class="el-icon-caret-right" @click="handleDirection('RIGHT')"></i>
        </div>
        <div class="bottom">
          <i
            class="el-icon-caret-bottom"
            @click="handleDirection('BOTTOM')"
          ></i>
        </div>
      </div>
      <div class="button-list">
        <!-- <el-button type="primary" size="small" @click="flv_start"
          >开始</el-button
        >
        <el-button type="primary" size="small" @click="flv_pause"
          >暂停</el-button
        > -->
        <div class="button-item">
          <el-button type="primary" size="small" @click="flv_screen">
            截图
          </el-button>
        </div>
        <div class="button-item" style="margin-top: 15px">
          <el-button
            type="primary"
            size="small"
            @click="flv_record(true)"
            v-if="!ifRecord"
          >
            录屏
          </el-button>
          <el-button
            type="primary"
            size="small"
            @click="flv_record(false)"
            v-else
          >
            停止
          </el-button>
          <div class="play-loading" v-show="loadingTime === 1">录制中.</div>
          <div class="play-loading" v-show="loadingTime === 2">录制中..</div>
          <div class="play-loading" v-show="loadingTime === 3">录制中...</div>
        </div>
      </div>
      <div class="video-list">
        <div class="video-item" v-for="item in videoList" :key="item.videoId">
          <div class="item-name">{{ item.videoName }}</div>
          <div class="item-button-list">
            <div class="button" type="text" size="mini" @click="replay(item)">
              播放
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- shipDetail -->
    <div class="ship-detail" v-if="shipDetail.targetNum">
      <div class="ship-item" v-for="(item, index) in shipOptions" :key="index">
        {{ `${item.label}: ${item.format(shipDetail)}` }}
      </div>
    </div>
    <canvas
      width="1000px"
      height="500px"
      id="V2I_canvas"
      ref="V2I_canvas"
      style="display: none"
    ></canvas>
  </div>
</template>

<script>
import flvjs from "flv.js";
// import { getVideoUrl, stopVideoUrl } from "@/api/video";
import { videoRecord, videoStopRecord, getVideoPage } from "@/api/dev";
import { transfLonAndLat } from "@/utils/chart";
// import { dateFormat } from "@/utils/date";
import Mp4Tpl from "./mp4.vue";

export default {
  components: { Mp4Tpl },
  data() {
    return {
      flvPlayer: null, // 播放器实例化对象
      visible: false, // 弹框显示值
      isPlay: false, // 是否播放中
      ifRecord: false, // 是否录像中
      loadingInterval: null,
      loadingTime: 0,
      videoList: [],
      shipDetail: {},
      videoUrl: "",
    };
  },
  computed: {
    shipOptions() {
      return [
        {
          label: "船名",
          prop: "shipName",
          format: (row) => {
            return row.aisShipName || "";
          },
        },
        {
          label: "经度",
          prop: "lon",
          format: (row) => {
            console.log("row: ", row);
            return transfLonAndLat(row.targetLon, "lon", true);
          },
        },
        {
          label: "纬度",
          prop: "lat",
          format: (row) => {
            return transfLonAndLat(row.targetLat, "lon", true);
          },
        },
        {
          label: "雷达编号",
          prop: "lat",
          format: (row) => {
            return row.targetNum;
          },
        },
        {
          label: "时间戳",
          prop: "lat",
          format: (row) => {
            // return dateFormat(parseInt(row.time) * 1000, "yyyy-MM-dd");
            return row.time;
          },
        },
      ];
    },
  },
  methods: {
    open() {
      this.visible = true;
      var videoElement = document.getElementById("videoElement");
      if (flvjs.isSupported()) {
        this.flvPlayer = flvjs.createPlayer({
          type: "flv",
          url: "http://114.55.175.168:8002/live?app=live&stream=radarDemo",
        });
        this.flvPlayer.attachMediaElement(videoElement);
        this.isPlay = true;
        this.flvPlayer.load(); //加载
      }
      // 获取录像
      this.getVideoList();
    },
    close() {
      this.$emit("close");
      if (this.ifRecord) {
        videoStopRecord();
        clearInterval(this.loadingInterval);
        this.loadingTime = 0;
      }
      this.shipDetail = {};
    },
    flv_start() {
      this.isPlay = true;
      this.flvPlayer.play();
    },
    flv_pause() {
      this.isPlay = false;
      this.flvPlayer.pause();
    },
    flv_destroy() {
      if (this.flvPlayer) {
        this.flvPlayer.pause();
        this.flvPlayer.unload();
        this.flvPlayer.detachMediaElement();
        this.flvPlayer.destroy();
        this.flvPlayer = null;
      }
    },
    flv_seekto() {
      this.flvPlayer.currentTime = parseFloat(
        document.getElementsByName("seekpoint")[0].value
      );
    },
    flv_screen() {
      console.log("截图");
      this.htmlToImage();
    },
    flv_record(state) {
      this.ifRecord = state;
      if (state) {
        videoRecord();
        this.loadingInterval = setInterval(() => {
          if (this.loadingTime === 3) {
            this.loadingTime = 1;
          } else {
            this.loadingTime += 1;
          }
        }, 500);
      } else {
        videoStopRecord();
        this.loadingTime = 0;
        clearInterval(this.loadingInterval);
        this.getVideoList();
      }
    },
    htmlToImage() {
      var canvas = document.getElementById("V2I_canvas");
      if (!canvas.getContext) {
        alert("您的浏览器暂不支持canvas");
        return false;
      } else {
        var context = canvas.getContext("2d");
        var video = document.getElementById("videoElement");

        context.drawImage(video, 0, 0, canvas.width, canvas.height);
        var url = canvas.toDataURL("image/png"); //得到图片的base64编码数据

        var a = document.createElement("a"); // 生成一个a元素
        var event = new MouseEvent("click"); // 创建一个单击事件
        a.download = name || "photo"; // 设置图片名称
        a.href = url; // 将生成的URL设置为a.href属性
        a.dispatchEvent(event); // 触发a的单击事件
      }
    },
    handleDirection(d) {
      this.$emit("radarControlType", d);
    },
    // 获取录像列表
    getVideoList() {
      getVideoPage().then(({ data }) => {
        this.videoList = data.records;
      });
    },
    showShip(row) {
      console.log("row: ", row);
      this.shipDetail = row;
    },
    replay(row) {
      this.flv_destroy();
      this.videoUrl = `http://47.96.65.45:1108/${row.videoName}`;
      console.log("videoUrl: ", this.videoUrl);
      // var videoElement = document.getElementById("videoElement");
      // if (flvjs.isSupported()) {
      //   this.flvPlayer = flvjs.createPlayer({
      //     type: "video/mp4",
      //     url: `http://47.96.65.45:1108/radar/media/${row.videoName}`,
      //   });
      //   this.flvPlayer.attachMediaElement(videoElement);
      //   this.isPlay = true;
      //   this.flvPlayer.load(); //加载
      // }
    },
    videoClose() {
      this.videoUrl = "";
      this.$nextTick(() => {
        var videoElement = document.getElementById("videoElement");
        if (flvjs.isSupported()) {
          this.flvPlayer = flvjs.createPlayer({
            type: "flv",
            url: "http://114.55.175.168:8002/live?app=live&stream=radarDemo",
          });
          this.flvPlayer.attachMediaElement(videoElement);
          this.isPlay = true;
          this.flvPlayer.load(); //加载
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.video-dialog {
  width: 600px;
  position: absolute;
  top: 90px;
  left: 20px;
  background-color: #fff;
  padding: 20px 20px 10px;
  border: 1px solid #eee;
  border-radius: 3px;
  .title {
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    .title {
      width: calc(100% - 20px);
    }
    .icon {
      width: 20px;
      text-align: right;
      i {
        font-size: 16px;
        cursor: pointer;
      }
    }
  }
  .controls {
    display: flex;
    position: relative;
    .direction {
      width: 120px;
      height: 120px;
      display: flex;
      flex-wrap: wrap;
      margin-top: 20px;
      .top,
      .bottom {
        width: 100%;
        text-align: center;
      }
      .left,
      .right {
        width: calc(100% / 3);
        text-align: center;
      }
      .play {
        width: calc(100% / 3);
        text-align: center;
      }
      i {
        font-size: 40px;
        color: #000;
        cursor: pointer;
      }
    }
    .button-list {
      margin: 40px 20px 20px;
    }
  }
  .play-loading {
    font-size: 12px;
    color: #666;
    margin-top: 5px;
  }
  .video-list {
    width: calc(100% - 120px - 120px);
    height: 160px;
    overflow-y: scroll;
    padding: 0 0 0 10px;
    .video-item {
      display: flex;
      padding: 5px 0;
      border-bottom: 1px solid #ddd;
      .item-name {
        width: calc(100% - 40px);
      }
      .item-button-list {
        width: 40px;
        .button {
          color: #409eff;
          background: 0 0;
          padding-left: 0;
          padding-right: 0;
          cursor: pointer;
        }
      }
    }
  }
}
.videobox {
  display: flex;
  /* justify-content: space-between; */
  /* flex-wrap: wrap; */
}
.videolist {
  width: 550px;
  height: 906px;
  display: flex;
  .search {
    margin-left: 50px;
    .el-input {
      width: 300px;
      margin-top: 20px;
    }
    ul {
      width: 100%;
      height: 777px;
      overflow: hidden;
      overflow-y: auto;
      list-style: none;
      li {
        padding: 7px;
        margin: 1px 0;
        text-decoration: none;
        white-space: nowrap;
        font-size: 14px;
        cursor: pointer;
        &:hover {
          background: #fff;
        }
        .el-icon-video-camera-solid {
          font-size: 16px;
          color: #67c23a;
        }
      }
    }
  }
}
.video {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  justify-content: space-evenly;
  video {
    object-fit: contain;
    width: 600px;
    height: 390px;
  }
}
.ship-detail {
  position: absolute;
  width: 558px;
  height: 60px;
  background-color: rgba(0, 0, 0, 0.2);
  top: 60px;
  display: flex;
  flex-wrap: wrap;
  .ship-item {
    width: calc(100% / 3);
    padding: 2px 10px;
    color: #fff;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
  }
}
</style>
